<template>
  <div>
    <div class="create-title">
      <div class="create-title-flex">
        <p>创建监测</p>
        <span @click="$router.goBack()">返回</span>
      </div>
    </div>
    <ul class="create-type">
      <li v-for="(item,index) in selectType"
          :style="{ backgroundColor: item.bgColor }"
          :key="index"
          @click="goNext({sClass:item.spanClass,name:item.name})">
        <span :class="[item.spanClass]">{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    name: "createMonitor",
    data() {
      return {
        selectType: [{
          bgColor: '#62b1ec',
          spanClass: 't-company',
          name: '企业'
        }, {
          bgColor: '#5dc8ea',
          spanClass: 't-brand',
          name: '品牌'
        }, {
          bgColor: '#62b1ec',
          spanClass: 't-person',
          name: '人物'
        }, {
          bgColor: '#4693e9',
          spanClass: 't-event',
          name: '事件'
        }, {
          bgColor: '#50a1f7',
          spanClass: 't-unit',
          name: '单位'
        }, {
          bgColor: '#4693e9',
          spanClass: 't-hospital',
          name: '医院'
        }, {
          bgColor: '#2a81e2',
          spanClass: 't-school',
          name: '学校'
        }, {
          bgColor: '#4594e9',
          spanClass: 't-stock',
          name: '股票'
        }, {
          bgColor: '#2a81e2',
          spanClass: 't-star',
          name: '明星'
        }, {
          bgColor: '#0f62c0',
          spanClass: 't-city',
          name: '城市'
        }, {
          bgColor: '#0a55a8',
          spanClass: 't-vocation',
          name: '行业'
        }, {
          bgColor: '#0f62c0',
          spanClass: 't-like',
          name: '兴趣'
        }]
      }
    },
    methods:{
      ...mapMutations(['saveType']),
      goNext(param){
        // console.log(param);
        this.saveType(param);
        this.$router.push('/addMonitor')
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../style/mixin";

  .create-title {
    position: fixed;
    top: 0;
    margin: auto;
    width: 750px;
    height: 88px;
    background-color: #05469b;
    .create-title-flex {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      p {
        margin-left: 15px;
        padding: 10px 52px;
        font-size: 34px; /*px*/
        background: url("../../assets/monitor/monitor_icon@2x.png") no-repeat left center;
        background-size: 52px 54px;
      }
      span {
        padding-right: 32px;
        font-size: 30px; /*px*/
      }
    }
  }

  [data-dpr='3'] .create-title .create-title-flex p {
    background: url("../../assets/monitor/monitor_icon@3x.png") no-repeat left center;
    background-size: 52px 54px;
  }

  .create-type {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 88px;
    padding: 28px 15px;
    li {
      width: 240px;
      height: 208px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      span {
        padding: 86px 45px 0 45px;
      }
      .t-company {
        background: url("../../assets/monitor/monitor_company@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-brand {
        background: url("../../assets/monitor/monitor_brand@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-person {
        background: url("../../assets/monitor/monitor_person@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-event {
        background: url("../../assets/monitor/monitor_event@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-unit {
        background: url("../../assets/monitor/monitor_unit@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-hospital {
        background: url("../../assets/monitor/monitor_hospital@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-school {
        background: url("../../assets/monitor/monitor_school@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-stock {
        background: url("../../assets/monitor/monitor_stock@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-star {
        background: url("../../assets/monitor/monitor_star@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-city {
        background: url("../../assets/monitor/monitor_city@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-vocation {
        background: url("../../assets/monitor/monitor_vocation@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
      .t-like {
        background: url("../../assets/monitor/monitor_like@2x.png") no-repeat top right;
        background-size: 109px 114px;
      }
    }
  }

  [data-dpr='3'] .create-type {
    .t-company {
      background: url("../../assets/monitor/monitor_company@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-brand {
      background: url("../../assets/monitor/monitor_brand@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-person {
      background: url("../../assets/monitor/monitor_person@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-event {
      background: url("../../assets/monitor/monitor_event@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-unit {
      background: url("../../assets/monitor/monitor_unit@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-hospital {
      background: url("../../assets/monitor/monitor_hospital@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-school {
      background: url("../../assets/monitor/monitor_school@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-stock {
      background: url("../../assets/monitor/monitor_stock@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-star {
      background: url("../../assets/monitor/monitor_star@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-city {
      background: url("../../assets/monitor/monitor_city@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-vocation {
      background: url("../../assets/monitor/monitor_vocation@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
    .t-like {
      background: url("../../assets/monitor/monitor_like@3x.png") no-repeat top right;
      background-size: 109px 114px;
    }
  }

</style>
